<template>
    <text class="sc-icon" :style="[iconStyle]">{{ icon }}</text>
</template>

<script>
import mpMixin from "../../libs/mixin/mpMixin.js";
import mixin from "../../libs/mixin/mixin.js";
// #ifdef APP-NVUE
// nvue通过weex的dom模块引入字体，相关文档地址如下：
// https://weex.apache.org/zh/docs/modules/dom.html#addrule
import iconUrl from './iconfont.ttf';
const domModule = weex.requireModule('dom')
domModule.addRule('fontFace', {
    'fontFamily': "scicon-iconfont",
    'src': "url('" + iconUrl + "')"
})
// #endif
// 引入图标名称，已经对应的 unicode
import icons from './icons';
export default {
    props: {
        name: {
            type: String,
            default: 'arrow-left',
        },
        size: {
            type: [Number, String],
            default: 30,
        },
        bold: {
            type: Boolean,
            default: false,
        },
        color: {
            type: String,
            default: '#000'
        }
    },
    emits: ['click'],
    mixins: [mpMixin, mixin],
    data() {
        return {
        }
    },
    computed: {
        icon() {
            const code = icons[this.name];
            return code ? unescape(`%u${code}`) : 'sc-icon not found'
        },
        iconStyle() {
            return {
                fontSize: this.$sc.addUnit(this.size),
                fontWeight: this.bold ? 'bold' : 'normal',
                color: this.$sc.getColor(this.color),
            }
        }
    }

}
</script>

<style lang="scss" scoped>
/* #ifndef APP-NVUE */
// 非nvue下加载字体
@font-face {
    font-family: 'scicon-iconfont';
    src: url('./iconfont.ttf') format('truetype');
}

/* #endif */
.sc-icon {
    font-family: 'scicon-iconfont';
}
</style>